<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <!-- 
    事件监听机制(事件三要素)
    1.事件源（谁）：触发事件的元素/标签对象
    2.事件类型（什么事件）： 例如 click 点击事件,共有事件,元素独有事件等
    3.事件处理程序（做啥）：将事件源和事件类型进行绑定,处理程序(事件触发后要执行的代码(函数形式)，事件处理函数)
     -->
    <div class="box">今天真热啊!!</div>
    <input type="text">
</body>
<script>
    //事件源
    var div = document.getElementsByClassName('box')[0];
    //匿名函数就是事件处理(div.onclick 事件类型 , onclick点击事件)
    div.onclick=function(){
        console.log('onclick'+'点击了div');
        div.style.color='red';
    }
</script>

</html>